import React, {useState} from 'react';
import {Form, Button, Input, Modal, Row, Col, Select} from 'antd';

const FormItem = Form.Item;
const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  },
};

const DetailsForm = props => {
  const [formVals, setFormVals] = useState({
    userId: props.values.userId,
    username: props.values.username,
    // roleName: props.values.roleName,
     roleId: props.values.roleId,
    phone: props.values.phone,
    email: props.values.email,
    status: props.values.status,
    description: props.values.description,
    updateTime: props.values.update_time,
    aliasname: props.values.aliasname,
  });
  const [form] = Form.useForm();
  const {Option} = Select;
  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;

  const handleNext = async () => {
    const fieldsValue = await form.validateFields();
    setFormVals({...formVals, ...fieldsValue});
    handleUpdate({...formVals, ...fieldsValue});
  };
  const renderContent = () => {
    return (
      <>
        <Row gutter={16}>
          <Col className="gutter-row" span={12}>
            <FormItem
              name="userId"
              label="用户ID"
              required
            >
              <Input disabled/>
            </FormItem></Col>
          <Col className="gutter-row" span={12}>
            <FormItem
              name="username"
              label="用户名称"
              required
            >
              <Input disabled/>
            </FormItem>
          </Col>
          <Col className="gutter-row" span={12}>
            <FormItem
              name="aliasname"
              label="别名"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="roleId"
              label="角色名称"
              required
            >
              {/* <Select defaultValue={props.values.roleId}> */}
              <Select>
                {props.options.map((item, value) => <Option key={item.roleId} value={item.roleId}>{item.roleName}</Option>)}
              </Select>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="phone"
              label="手机号码"
            >
              <Input/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="email"
              label="邮箱"
            >
              <Input/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="status"
              label="用户状态"
              required
            >
              <Select>
                <Option key="0" value="0">启用</Option>
                <Option key="1" value="1">禁用</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="description"
              label="描述"
            >
              <Input/>
            </FormItem>
          </Col>
          <Col span={12} className="gutter-row">
            <FormItem
              name="updateTime"
              label="更新时间"
            >
              <Input bordered={false}/>
            </FormItem>
          </Col>
        </Row>

      </>
    );
  };

  const renderFooter = () => {

    return (
      <>
        <Button onClick={() => handleUpdateModalVisible(false, values)}>取消</Button>
        <Button type="primary" onClick={() => handleNext()}>
          更新
        </Button>
      </>
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title="用户详情"
      visible={updateModalVisible}
      footer={renderFooter()}
      onCancel={() => handleUpdateModalVisible()}
    >
      <Form
        layout="horizontal"
        {...formLayout}
        form={form}
        initialValues={{
          userId: formVals.userId,
          username: formVals.username,
          // roleName: formVals.roleName,
          roleId: `${formVals.roleId }`,
          phone: formVals.phone,
          email: formVals.email,
          status: `${formVals.status}`,
          description: formVals.description,
          updateTime: formVals.updateTime,
          aliasname: formVals.aliasname,
        }}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default DetailsForm;
